<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>18岁的那年</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="icon/iconfont.css">
</head>

<body>
    <!-- banner部分begin -->
    <div class="bannner w" id="homepage">
        <img src="download/微信截图_20250507001006.png" alt="">
        <div class="context1">
            <p>你是否想起，那年18岁</p>
            <p>&nbsp;&nbsp;我们曾经走过的旅途。</p>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#homepage">Homepage</a></li>
                <li><a href="#text">Text</a></li>
                <li><a href="#Aalbum">Album</a></li>
            </ul>
        </div>
        <div class="nav-left-top">
        </div>
        <div class="nav-left-bottom">
        </div>
        <div class="nav-right-top">
        </div>
        <div class="nav-right-bottom"></div>
    </div>
    <!-- banner部分end -->

    <!-- 旁白1begin -->
    <div class="voice-over-first w">
        <h2>Something Want To Say</h2>
        <p><img src="images/ball.png" alt=""></p>
        <div>Welcome</div>
        <span class="iconfont icon-icon"></span>
        <div id="TText">Text</div>
    </div>
    <!-- 旁白1end -->

    <!-- 文字区域begin -->
    <div id="text" class="w">
        <div class="first-box">
            <div class="first-pic"><img src="download/text1.jpg" alt=""></div>
            <div class="first-text st">
                <p>青春的定义是什么呢?</p>
                <p>于我而言，青春是清晨苦涩的咖啡</p>
                <p>是写不完的试卷</p>
                <p>是深夜里仍亮着的那盖灯</p>
                <p>是抄笔记时抬头的晕眩</p>

                <p>但是回首过往</p>
                <p>少年青春不被定义</p>
                <p>因为我们是青春的代名词。</p>
            </div>
        </div>
        <div class="twice-box">
            <div class="twice-pic"><img src="download/text2.jpg" alt=""></div>
            <div class="twice-text st">
                <p>青春终将散场</p>
                <p>唯独记忆永不腐朽，泛黄的纸上书写着年少</p>
                <p>那时的我们华而且实</p>
                <p>一篇篇过往本就是马不停蹄的错过和相遇</p>
                <p>频繁的照片只是想在未来再回头看看</p>
                <p>这是我们滚烫的青春里最沸腾的一章。</p>
            </div>
        </div>
        <div class="third-box">
            <div class="third-pic"><img src="download/text3.jpg" alt=""></div>
            <div class="third-text st">
                <p>你问我在过去中是否后悔</p>
                <p>我说是的，但也不是</p>
                <p>遗憾终于伴随着人生始终</p>
                <p>但对于我们来说又如何呢</p>
                <p>无论成功与否</p>
                <p>那是我们灿烂年少时充满价值的经历，</p>
                <p>为我们的人生留下难以忘怀的华章</p>
                <p>我们摘下一粒最大的麦穗</p>
                <p>闭着眼</p>
                <p>一步步走出了麦田</p>
            </div>
        </div>
        <div class="forth-box">
            <div class="forth-pic"><img src="download/text4.jpg" alt=""></div>
            <div class="forth-text st">
                <p>未来又是如何?</p>
                <p>或许我们从前从未考虑过</p>
                <p>或许以后也不必</p>
                <p>当下的道路便是最好的道路</p>
                <p>不必纠结当下，也不必太担忧未来</p>
                <p>人生没有无用的经历</p>
                <p>所以</p>
                <p>一直走</p>
                <p>天一定亮</p>
                <p>努力的意义从来不是成功，而是不留遗憾</p>
            </div>
        </div>
    </div>
    <!-- 文字区域end -->

    <!-- 旁白2begin -->
    <div class="voice-over-twice w">
        <h2>Memorable Experience</h2>
        <p><img src="images/ball.png" alt=""></p>
        <div>forever</div>
        <span class="iconfont icon-xiangce"></span>
        <div id="Aalbum">album</div>
    </div>
    <!-- 旁白区域2end -->

    <!-- 相册部分begin -->
    <div class="album w">
        <ul>
            <li><img src="download/微信图片_20250423210210.jpg" alt="">第一次见到大海</li>
            <li><img src="download/微信图片_20250423210222.jpg" alt="">橘子洲头的毛主席</li>
            <li><img src="download/dt.jpg" alt="">双子塔下</li>
            <li><img src="download/微信图片_20250423210215.jpg" alt="">朝阳即起的希冀</li>
            <li><img src="download/微信图片_202504232102151.jpg" alt="">海上日出</li>
            <li><img src="download/微信图片_202504232102152.jpg" alt="">凌晨沙滩上的我们</li>
            <li><img src="download/微信图片_20250423210216.jpg" alt="">十里长堤</li>
            <li><img src="download/微信图片_20250423210219.jpg" alt="">又坑又热的鼓浪屿</li>
            <li><img src="download/微信图片_202504232102191.jpg" alt="">武功山下</li>
            <li><img src="download/微信图片_20250423210220.jpg" alt="">武功山顶的灿烂</li>
            <li><img src="download/微信图片_20250423210221.jpg" alt="">长沙五一广场</li>
            <li><img src="download/微信图片_202504232102201.jpg" alt="">红房子</li>
        </ul>
    </div>
    <!-- 旁白部分3 -->
    <div class="voice-over-third w">
        和可爱的我们
    </div>
    <!-- 旁白部分3 -->
    <div class="footer-line one">
    </div>
    <div class="us w">
        <ul>
            <li><img src="download/_DSC2730(1).jpg" alt=""></li>
            <li><img src="download/train.jpg" alt=""></li>
            <li><img src="download/night.jpg" alt=""></li>
            <li><img src="download/sea.jpg" alt=""></li>
            <li><img src="download/ropeway.jpg" alt=""></li>
            <li><img src="download/hezhao.jpg" alt=""></li>
            <div>
                <p>少年</p>
                <p>前面的路还有很远</p>
                <p>是忙忙碌碌，是车水马龙</p>
                <p>是为了生存的柴米油盐</p>
                <p>是追寻幸福的拼尽全力</p>
                <p>不要回头</p>
                <p>不必在意他人的目光</p>
                <p>走下去</p>
                <p>请你记得年少的自己</p>
            </div>
        </ul>
    </div>
    <!-- 相册部分end -->

    <!-- 尾部区域 -->
    <div class="footer-line">
    </div>
    <div class="footer">
        <p>To you who were 18 years old.</p>
    </div>
    <div class="writer w">
        <p>作者:CSDN @Traveler丶</p>
    </div>
</body>

</html>